<template>
  <view class="container">
    <view class="orderinfo">
      <view style="display: flex; align-items: center">
        <text style="font-weight: bold; font-size: 36rpx; color: #222222">行程结束，待用户支付</text>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
      <!-- 时间 -->
      <view class="flex" style="margin-top: 36rpx">
        <image src="../../static/mine/time.png" style="width: 28rpx; height: 28rpx; margin-right: 14rpx" mode=""></image>
        <text style="font-weight: 500; font-size: 28rpx; color: #222222">{{ obj.starttime }}</text>
      </view>
      <!-- 起点 -->
      <view class="flex" style="margin-top: 28rpx; margin-bottom: 42rpx">
        <image src="../../static/mine/start.png" style="width: 24rpx; height: 24rpx; margin-right: 14rpx" mode=""></image>
        <text style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 28rpx; color: #222222">{{ obj.starting }}</text>
      </view>
      <!-- 终点 -->
      <view class="flex" style="margin-bottom: 28rpx">
        <image src="../../static/mine/end.png" style="width: 24rpx; height: 24rpx; margin-right: 14rpx" mode=""></image>
        <text style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 28rpx; color: #222222">
          {{ obj.end }}
        </text>
      </view>
      <!-- 手机号 -->
      <view class="flex" v-if="obj.is_mobile == 1">
        <image src="../../static/order/phonenumber.png" style="width: 22rpx; height: 24rpx; margin-right: 14rpx" mode=""></image>
        <text style="font-weight: 500; font-size: 28rpx; color: #222222">{{ obj.mobile }}</text>
      </view>
    </view>
    <view class="driverinfo">
      <image :src="imgurl + obj.driver.avatar" style="border-radius: 50%; width: 100rpx; height: 100rpx; margin-right: 10rpx" mode=""></image>
      <view class="iofo">
        <view class="top">
          <text style="margin-right: 18rpx; font-weight: bold; font-size: 30rpx; color: #222222">{{ obj.driver.name }}</text>
          <text style="font-weight: 500; font-size: 30rpx; color: #222222">SJ5875901</text>
        </view>
        <view>
          <text style="font-weight: 500; font-size: 28rpx; color: #f2860a">{{ obj.driver.score }}</text>
          <image src="../../static/order/xingxing.png" style="width: 26rpx; height: 26rpx; vertical-align: middle; margin-left: 8rpx; margin-right: 34rpx" mode=""></image>
          <text style="font-weight: 500; font-size: 26rpx; color: #222222">{{ obj.driver.driving_experience }}年驾龄</text>
          <text style="padding: 0 10rpx; font-weight: 500; font-size: 26rpx; color: #222222">|</text>
          <text style="font-weight: 500; font-size: 26rpx; color: #222222">{{ obj.driver.num }}单</text>
        </view>
      </view>
      <image @click="makephone" src="../../static/order/bluephone.png" mode="" style="width: 64rpx; height: 64rpx; margin-left: 160rpx"></image>
    </view>
    <view class="coseinfo">
      <view class="flex sb" style="margin-top: 40rpx">
        <view style="font-weight: 500; font-size: 28rpx; color: #222222">预付金额</view>
        <view style="font-weight: 500; font-size: 28rpx; color: #222222">{{ obj.actual_money }}元</view>
      </view>
      <!-- @click="gocostdetail" -->
      <view class="flex sb" style="margin: 30rpx 0">
        <view style="font-weight: 500; font-size: 28rpx; color: #222222">应付金额</view>
        <view>
          <text style="font-weight: 500; font-size: 28rpx; color: #222222">{{ Number(obj.reality_money) }}元</text>
          <uni-icons type="right" size="15"></uni-icons>
        </view>
      </view>
      <view class="flex sb" style="margin: 30rpx 0" v-if="obj.supplement == 1">
        <view style="font-weight: 500; font-size: 28rpx; color: #222222">退还金额</view>
        <view>
          <text style="font-weight: 500; font-size: 28rpx; color: #222222">{{ Number(obj.actual_money) - Number(obj.reality_money) }}元</text>
        </view>
      </view>
      <view class="flex sb" style="margin: 30rpx 0">
        <view style="font-weight: 500; font-size: 28rpx; color: #222222">超出时间</view>
        <view style="font-weight: 500; font-size: 28rpx">{{ obj.waittime }}</view>
      </view>
      <view class="flex sb" style="margin: 30rpx 0">
        <view style="font-weight: 500; font-size: 28rpx; color: #222222">超时费</view>
        <view style="font-weight: 500; font-size: 28rpx">{{ obj.length_money_draw }}元</view>
      </view>
      <view class="flex sb" style="margin: 30rpx 0">
        <view style="font-weight: 500; font-size: 28rpx; color: #222222">超出距离</view>
        <view style="font-weight: 500; font-size: 28rpx">
          {{ (obj.reality_distance - obj.distance).toFixed(2) > 0 ? (obj.reality_distance - obj.distance).toFixed(2) : '' }}公里
        </view>
      </view>
      <view class="flex sb" style="margin: 30rpx 0">
        <view style="font-weight: 500; font-size: 28rpx; color: #222222">需补差价</view>
        <view style="font-weight: 500; font-size: 28rpx; color: #ec0000">
          {{
            obj.supplement == 2 && obj.length_money_draw != '0.00'
              ? Number(obj.supplement_money) + Number(obj.length_money_draw)
              : obj.supplement == 2
              ? Number(obj.supplement_money)
              : obj.supplement == 1
              ? Number(obj.length_money_draw)
              : obj.supplement == 0 && obj.length_money_draw != '0.00'
              ? Number(obj.length_money_draw)
              : ''
          }}元
        </view>
      </view>
    </view>
    <view class="gopay" @click="$refs.pay.open()">去支付</view>
    <!-- 支付弹框 -->
    <uni-popup ref="pay" type="bottom" border-radius="10px 10px 0 0">
      <view class="box">
        <!-- 标题 -->
        <view class="boxhead">
          <view></view>
          <view>选择支付方式</view>
          <uni-icons type="close" size="20" @click="$refs.pay.close()"></uni-icons>
        </view>
        <!-- 支付金额 -->
        <view style="text-align: center; margin-top: 44rpx">
          <text style="font-weight: 500; font-size: 32rpx; color: #ec0000">￥</text>
          <text style="font-weight: bold; font-size: 48rpx; color: #ec0000">
            <!-- {{ yugu ? (obj.couponlog.actual_money ? obj.couponlog.actual_money : obj.money) : obj.special_money }} -->
            {{
              obj.supplement == 2 && obj.length_money_draw != '0.00'
                ? Number(obj.supplement_money) + Number(obj.length_money_draw)
                : obj.supplement == 2
                ? Number(obj.supplement_money)
                : obj.supplement == 1
                ? Number(obj.length_money_draw)
                : obj.supplement == 0 && obj.length_money_draw != '0.00'
                ? Number(obj.length_money_draw)
                : ''
            }}
          </text>
        </view>
        <!-- 选择支付方式 -->
        <view class="payitem" @click="paystyle = !paystyle">
          <!-- 余额支付 -->
          <view class="item">
            <image src="../../static/images/balance.png" mode="" style="width: 60rpx; height: 60rpx; margin-right: 24rpx"></image>
            <text>余额支付</text>
            <text>（￥ {{ lastmoney + ')' }}</text>
          </view>
          <radio style="transform: scale(0.7)" color="#3483F6" :value="paystyle" :checked="paystyle" />
        </view>
        <!-- 微信支付 -->
        <view class="payitem" @click="paystyle = !paystyle">
          <view class="item">
            <image src="../../static/images/weixinapy.png" mode="" style="width: 60rpx; height: 60rpx; margin-right: 24rpx"></image>
            <text>微信支付</text>
          </view>
          <radio style="transform: scale(0.7)" color="#3483F6" :value="paystyle" :checked="!paystyle" />
        </view>
        <view class="paybtn" @click="submit">确定</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      lastmoney: '', // 余额
      yugu: true, // 预估的单选框
      paystyle: true, // 支付的方式
      orderid: '',
      obj: {},
      imgurl: ''
    };
  },
  onLoad(opt) {
    if (opt.orderid) {
      this.orderid = opt.orderid;
    }
    this.getdetail();
    this.imgurl = this.img;
    this.getlastmoney();
  },
  methods: {
    makephone() {
      uni.makePhoneCall({
        phoneNumber: this.obj.driver.mobile
      });
    },
    // 支付
    submit() {
      // 余额支付
      if (this.paystyle) {
        this.http('/order/premium', {
          order_id: this.orderid,
          pay_type: 'remain'
        }).then((res) => {
          console.log('余额支付结果', res);
          uni.redirectTo({
            url: '/order/waitpingjia/waitpingjia?orderid=' + this.orderid
          });
        });
      } else {
        //微信支付
        this.http('/order/premium', {
          order_id: this.orderid,
          pay_type: 'wechat'
        }).then((res) => {
          console.log('', res);
          uni.requestPayment({
            provider: 'wxpay',
            package: res.data.package,
            paySign: res.data.paySign,
            nonceStr: res.data.nonceStr,
            timeStamp: res.data.timeStamp,
            signType: res.data.signType,
            success: (res) => {
              console.log(res);
              uni.showToast({
                title: '支付成功'
              });
              uni.redirectTo({
                url: '/mine/myorder/myorder?orderid=' + res.data.order_id
              });
            }
          });
        });
      }
    },
    // 获取余额
    getlastmoney() {
      this.http('/user/myWallet').then((res) => {
        console.log('余额', res);
        this.lastmoney = res.data.money;
      });
    },
    // 获取详情
    async getdetail() {
      const res = await this.http('/order/details', {
        order_id: this.orderid
      });
      console.log('订单详情', res);
      this.obj = res.data;
      this.obj.starttime = dayjs(this.obj.createtime * 1000).format('YYYY-MM-DD HH:mm');
      let m = parseInt((this.obj.differ_sec / 60) % 60);
      let s = parseInt(this.obj.differ_sec % 60);
      m = m < 10 ? '0' + m : m;
      s = s < 10 ? '0' + s : s;
      this.obj.waittime = m + ':' + s;
    },
    gocostdetail() {
      uni.navigateTo({
        url: '/pages/yugudetail/yugudetail'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  box-sizing: border-box;
  width: 750rpx;
  height: 706rpx;
  background: #ffffff;
  border-radius: 40rpx 40rpx 0rpx 0rpx;
  padding: 32rpx 54rpx;

  .boxhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .payitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 42rpx;
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .paybtn {
    width: 654rpx;
    height: 92rpx;
    background: #3483f6;
    line-height: 92rpx;
    text-align: center;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
    margin-top: 90rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
}
.flex {
  display: flex;
  align-items: center;
}
.sb {
  justify-content: space-between;
}
.container {
  box-sizing: border-box;

  .orderinfo {
    box-sizing: border-box;
    width: 702rpx;
    height: 434rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 34rpx 24rpx 20rpx 34rpx;
    padding: 45rpx 20rpx;
  }
  .driverinfo {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 702rpx;
    height: 174rpx;
    background: #eff6ff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 20rpx 24rpx;
    padding: 37rpx 20rpx;
    .iofo {
    }
  }
  .coseinfo {
    box-sizing: border-box;
    width: 702rpx;
    height: 500rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 20rpx 24rpx;
    padding: 40rpx 32rpx;
  }
  .gopay {
    position: fixed;
    left: 48rpx;
    bottom: 180rpx;
    width: 654rpx;
    height: 92rpx;
    text-align: center;
    line-height: 92rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
    background: #3483f6;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
}
</style>
<style>
page {
  background-color: #f8f9fa;
}
</style>
